/// <reference types="@nasl/types" />
/// <reference types="../../../.lcap/lcap-ui/runtime/nasl.ui.d.ts" />
namespace extensions.lib_example.viewComponents {
  const {
    Component,
    Prop,
    ViewComponent,
    Slot,
    Method,
    Param,
    Event,
    ViewComponentOptions
  } = nasl.ui;
  @ExtensionComponent({
    replaceNaslUIComponent: "UButton",
    type: "pc",
    show: true,
    ideusage: {
      "idetype": "element",
      "editable": "text",
      "textholder": "text"
    }
  })
  @Component({
    title: '按钮',
    icon: 'button',
    description: '用于触发一个即时操作。',
    group: "Display"
  })
  export class MyUButton extends ViewComponent {
    @Prop({
      title: '禁用'
    })
    disabled: nasl.core.Boolean;
    constructor(options?: Partial<MyUButtonOptions>) {
      super();
    }
  }
  export class MyUButtonOptions extends ViewComponentOptions {
    @Prop({
      title: '路由链接',
      description: '需要 vue-router，与`<router-link>`的`to`属性相同。可以是一个字符串或者是描述目标位置的对象。'
    })
    private to: nasl.core.String | Location;
    @Prop({
      title: '替换',
      description: '需要 vue-router，与`<router-link>`的`replace`属性相同。如果为`true`，当点击时，会调用`router.replace()`而不是`router.push()`，于是导航后不会留下`history `记录。',
      setter: {
        concept: 'SwitchSetter'
      }
    })
    private replace: nasl.core.Boolean = false;
    @Prop({
      title: '追加路径',
      description: '需要 vue-router，与`<router-link>`的`append`属性相同。如果为`true`，则在当前路径后追加`to`的路径。',
      setter: {
        concept: 'SwitchSetter'
      }
    })
    private append: nasl.core.Boolean = false;
    @Prop({
      group: '主要属性',
      title: '文本',
      description: '显示文本内容',
      docDescription: '显示的文本内容',
      implicitToString: true
    })
    text: nasl.core.String;
    @Prop({
      group: '主要属性',
      title: '样式类型',
      description: '设置主题颜色和按钮样式类型',
      docDescription: '- 支持定义按钮样式，包括主要按钮、次要按钮、普通按钮、危险操作按钮和次要危险操作按钮。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '主要按钮'
        }, {
          title: '次要按钮'
        }, {
          title: '普通按钮'
        }, {
          title: '危险操作按钮'
        }, {
          title: '次要危险操作按钮'
        }]
      }
    })
    color: 'primary' | 'primary_secondary' | 'default' | 'danger' | 'danger_secondary' = 'default';
    @Prop({
      group: '主要属性',
      title: '展示方式',
      description: '行内展示，或块级换行展示',
      docDescription: '控制展示方式，支持行内展示、块级展示（宽度会充满父元素）两种方式。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '行内展示'
        }, {
          title: '块级展示，宽度会充满父元素'
        }]
      }
    })
    display: 'inline' | 'block' = 'inline';
    @Prop({
      group: '主要属性',
      title: '图标',
      docDescription: '支持从图标库选择图标或上传自定义图标。',
      setter: {
        concept: 'IconSetter'
      }
    })
    icon: nasl.core.String = '';
    @Prop({
      title: '图标位置',
      description: '设置图标居左或居右显示',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '左'
        }, {
          title: '右'
        }]
      }
    })
    iconPosition: 'left' | 'right' = 'left';
    @Prop({
      group: '交互属性',
      title: '链接类型',
      docDescription: '支持页面跳转、普通链接、下载链接。',
      bindHide: true,
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '页面跳转'
        }, {
          title: '下载链接'
        }]
      }
    })
    linkType: 'destination' | 'download' = 'destination';
    @Prop({
      group: '交互属性',
      title: '链接地址',
      docDescription: '链接的详细地址。'
    })
    hrefAndTo: nasl.core.String;
    @Prop({
      group: '交互属性',
      title: '链接打开方式',
      description: '链接跳转的打开方式，父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则其打开方式同当前窗口。',
      docDescription: '可选新窗口、父级窗口、当前窗口和顶级窗口，其中父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '新窗口'
        }, {
          title: '当前窗口'
        }, {
          title: '父级窗口'
        }, {
          title: '顶级窗口'
        }]
      }
    })
    target: '_blank' | '_self' | '_parent' | '_top' = '_self';
    @Prop({
      group: '状态属性',
      title: '禁用',
      description: '置灰显示，且禁止任何交互（焦点、点击、选择、输入等）',
      docDescription: '置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。',
      setter: {
        concept: 'SwitchSetter'
      },
      settable: true
    })
    disabled: nasl.core.Boolean = false;
    @Prop({
      group: '状态属性',
      title: '加载中触发条件',
      description: '设置加载中状态的触发条件',
      setter: {
        concept: 'SwitchSetter'
      }
    })
    private loading: nasl.core.Boolean = false;
    @Prop({
      group: '样式属性',
      title: '显示虚线边框',
      description: '设置是否显示虚线边框',
      docDescription: '启用后，按钮边框变为虚线，默认关闭。',
      setter: {
        concept: 'SwitchSetter'
      }
    })
    dashed: nasl.core.Boolean = false;
    @Prop({
      group: '样式属性',
      title: '尺寸',
      description: '设置按钮大小',
      docDescription: '按钮尺寸，支持设置巨大、大、中型、正常、小、迷你。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '巨大'
        }, {
          title: '大'
        }, {
          title: '中型'
        }, {
          title: '正常'
        }, {
          title: '小'
        }, {
          title: '迷你'
        }]
      }
    })
    size: 'huge' | 'large' | 'medium' | 'normal' | 'small' | 'mini' = 'normal';
    @Prop({
      group: '样式属性',
      title: '形状',
      description: '设置按钮形状',
      docDescription: '支持定义按钮形状，包括默认、方形、圆角、圆形四种。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{
          title: '默认'
        }, {
          title: '方形'
        }, {
          title: '圆角'
        }, {
          title: '圆形'
        }]
      }
    })
    shape: 'default' | 'square' | 'round' | 'circle' = 'default';
    @Event({
      title: '点击',
      description: '在元素上按下并释放任意鼠标按钮时触发。'
    })
    onClick: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '双击',
      description: '在元素上双击鼠标按钮时触发。'
    })
    onDblclick: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '右键点击',
      description: '在右键菜单显示前触发。'
    })
    onContextmenu: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '鼠标按下',
      description: '在元素上按下任意鼠标按钮时触发。'
    })
    onMousedown: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '鼠标释放',
      description: '在元素上释放任意鼠标按钮时触发。'
    })
    onMouseup: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '鼠标移入',
      description: '鼠标移入元素时触发。'
    })
    onMouseenter: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '鼠标移出',
      description: '鼠标移出元素时触发。'
    })
    onMouseleave: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '获得焦点',
      description: '获得焦点时触发。'
    })
    onFocus: (event: {
      cancelBubble: nasl.core.Boolean;
      detail: nasl.core.String;
      layerX: nasl.core.Integer;
      layerY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '失去焦点',
      description: '失去焦点时触发。'
    })
    onBlur: (event: {
      cancelBubble: nasl.core.Boolean;
      detail: nasl.core.String;
      layerX: nasl.core.Integer;
      layerY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
    @Event({
      title: '切换路由前',
      description: '使用 router 相关属性切换路由前触发'
    })
    onBeforeNavigate: (event: {
      to: nasl.core.String;
      replace: nasl.core.Boolean;
      append: nasl.core.Boolean;
    }) => any;
    @Event({
      title: '切换路由后',
      description: '使用 router 相关属性切换路由后触发'
    })
    onNavigate: (event: {
      to: nasl.core.String;
      replace: nasl.core.Boolean;
      append: nasl.core.Boolean;
    }) => any;
  }
}